<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>杭州西湖</title>
    <style>
        /* * {
            background-color: pink;
        } */
        header h1 {
            display: inline-block;
        }

        header mark {
            margin-left: 10px;
        }

        mark:hover {
            cursor: pointer;
        }

        .content img {
            float: left;
            margin-top: 10px;
        }

        /* 子绝父相 */
        /* 孩子用绝对定位，父亲使用相对定位。 */
        .content {

            position: relative;
        }

        .information {

            position: absolute;
            left: 320px;
        }

        .tuijian {
            position: absolute;
            top: 222px;
            font-size: 23px;
        }

        .img {
            position: relative;

        }

        .img .box {
            position: absolute;
            top: 269px;
        }

        span {

            float: left;
        }

        /* .box img {
            width: 100px;
        } */
        .nor {
            width: 199px;
        }

        .left,
        .right {
            height: 136px;
        }

        .foot {
            position: absolute;
            top: 422px;
            width: 100%;
        }

        
    </style>
</head>

<body>
    <header>
        <h1>杭州西湖</h1> <mark class="hand"> 购买门票</mark>
    </header>
    <hr style="border : 1px dashed blue;" />
    <section>
        <!-- 内容 -->
        <div class="content">
            <img src="images/xh.jpg" alt="">
            <!-- 右侧文字部分 -->
            <div class="information">
                <p><strong>景点地址：</strong> 浙江省杭州市西湖区西湖风景区</p>

                <p>西湖古称“钱塘湖”，又名“西子湖”，古代诗人苏轼就对它评价道：“欲把西湖比西子，淡妆浓抹总相宜。”西湖形态为近于等轴的多边形，湖面被孤山及苏堤、白堤两条人工堤分割为5个子湖区，子湖区间由桥孔连通，各部分的湖水不能充分掺混，造成...[阅读全文]
                </p>

                <p><strong>景点类型：</strong> 森林 洞穴 山脉 湖泊 寺庙 碑塔 亭台楼阁 演出</p>
                <p> <strong>开放时间：</strong> 各景区开放时间有所不同。</p>

                <p><strong> 门票信息：</strong> 杭州西湖部分景点票价：灵隐寺30元；飞来峰35元；岳庙25元；...写点评>
                </p>
            </div>

            <div class="tuijian">西湖景点推荐</div>
            <div class="foot">
                <p><strong>浙江旅游景点：</strong></p>
                <hr style="border : 1px dashed blue;" />
                杭州旅游景点 宁波旅游景点 温州旅游景点 嘉兴旅游景点 湖州旅游景点 绍兴旅游景点 金华旅游景点 衢州旅游景点 舟山旅游景点 台州旅游景点 丽水旅游景点
            </div>
        </div>

    </section>
    <div class="img">
        <div class="box">
            <img class="left" src="images/left.png" alt="">
            <img class="nor" src="images/1.png" alt="">
            <img class="nor" src="images/2.png" alt="">
            <img class="nor" src="images/3.png" alt="">
            <img class="nor" src="images/4.png" alt="">
            <img class="nor" src="images/5.png" alt="">
            <img class="nor" src="images/6.png" alt="">
            <img class="nor" src="images/7.png" alt="">
            <img class="right" src="images/right.png" alt="">
        </div>

    </div>
    <!-- <span> <img src="images/left.png" alt=""></span>
    <span> <img src="images/1.png" alt=""></span>
    <span> <img src="images/2.png" alt=""></span>
    <span> <img src="images/3.png" alt=""></span>
    <span> <img src="images/4.png" alt=""></span>
    <span> <img src="images/5.png" alt=""></span>
    <span> <img src="images/6.png" alt=""></span>
    <span> <img src="images/7.png" alt=""></span>
    <span> <img src="images/right.png" alt=""></span> -->
   

</html>